import './App.css'

function App({ type }: { type: string }) {
  const p = <p>欢迎学习react通用后台开发</p>
  const isAdmin = true
  const style = { color: 'red', fontSize: 22 }
  const name = <span style={style}>河畔一角</span>
  const list = ['Tom', 'Jack', 'Lucy', 'Lily']
  const userName = '河扮一觉'
  const handleChange = (e: any) => {
    console.log(e.target.value)
  }
  return (
    <div className='App'>
      {p}
      {isAdmin ? <span>您好，管理员</span> : <span>普通访客</span>}
      {name}
      <p>
        {list.map(item => {
          return <a key={item}>{item}</a>
        })}
      </p>
      <p>
        <input type='text' value={userName} onChange={handleChange}></input>
      </p>
      <p>{type}</p>
    </div>
  )
}

export default App
